<template>
  <div class="order-card">
    <div class="order-time flex flex-start">下单时间：{{ props.order.orderTime }}</div>
    <div class="goods-card flex flex-space">
      <img class="goods-cover" :src="props.order.cover" alt="" />
      <div class="goods-info flex-grow">
        <div class="goods-name flex flex-space">
          <div class="name">{{ props.order.name }}</div>
          <div class="number">x{{ props.order.number }}</div>
        </div>
        <div class="goods-price flex flex-end">优惠前￥{{ props.order.price }}</div>
        <div class="goods-vip-price flex flex-space">
          <div class="discounts">
            <div class="discount" v-for="(discount, idx) in props.order.discounts" :key="idx">
              {{ discount }}
            </div>
          </div>
          <div class="vip-price flex">
            <div class="price-label">实付款￥</div>
            <div class="price-value">{{ props.order.vipPrice }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { OrderItem } from '@/types/mall'

interface OrderCardProps {
  order: OrderItem
}
const props = withDefaults(defineProps<OrderCardProps>(), {
  order: () => ({}) as OrderItem,
})
</script>
<style lang="scss" scoped>
.order-card {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  line-height: 1;
}
.order-time {
  height: 30px;
  border-bottom: 1px solid #e6e6e6;
  font-size: 12px;
  color: #666;
  padding: 0 16px;
}
.goods-card {
  min-height: 128px;
  padding: 0 16px;
  box-sizing: border-box;
}
.goods-cover {
  height: 104px;
  height: 104px;
  border-radius: 15px;
}
.goods-info {
  margin-left: 18px;
}
.goods-name {
  .name {
    font-size: 13px;
    font-weight: bold;
    color: #000;
  }
  .number {
    font-size: 11px;
    color: #000;
  }
}
.goods-price {
  font-size: 12px;
  color: #000;
  margin-top: 27px;
}
.goods-vip-price {
  margin-top: 6px;
  .vip-price {
    .price-label {
      color: #ff5000;
      font-size: 14px;
    }
    .price-value {
      font-size: 14px;
      color: #ff5000;
      font-weight: bold;
    }
  }
}
.discounts {
  .discount {
    width: fit-content;
    color: #ff5000;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 7px;
    border-radius: 3px;
    background: #fff1eb;
  }
}
</style>
